<script lang="ts" setup>
  import { ref, computed } from 'vue';

  const emit = defineEmits(['close']);

  const data = ref<{
    nameMethod: string;
    withGroupLetter: number;
    autoAddPlayer: number;
  }>({
    nameMethod: 'ALPHABET',
    withGroupLetter: 1,
    autoAddPlayer: 1,
  });

  const example = computed(() => {
    const groupLetter = data.value.withGroupLetter ? '组' : '';

    if (data.value.nameMethod === 'ALPHABET') {
      return ['A', 'B', 'C'].map((i) => `${i}${groupLetter}`).join('、');
    }

    return ['1', '2', '3'].map((i) => `${i}${groupLetter}`).join('、');
  });
</script>

<template>
  <a-modal
    title="批量创建分组"
    :width="500"
    visible
    @cancel="emit('close', false)"
  >
    <a-alert type="warning" style="margin-bottom: 12px">
      批量创建分组，会将已有分组删除，然后重新创建
    </a-alert>
    <a-alert style="margin-bottom: 12px">示例：{{ example }}</a-alert>
    <a-form :model="data" layout="vertical">
      <a-form-item label="组名生成方式" field="nameMethod">
        <a-select v-model="data.nameMethod">
          <a-option value="ALPHABET">字母</a-option>
          <a-option value="NUMBER">数字</a-option>
        </a-select>
      </a-form-item>

      <a-form-item label="是否携带“组”" field="withGroupLetter">
        <a-radio-group
          v-model="data.withGroupLetter"
          :options="[
            { value: 1, label: '携带' },
            { value: 0, label: '不携带' },
          ]"
        />
      </a-form-item>

      <a-form-item label="是否自动分配球员" field="autoAddPlayer">
        <a-radio-group
          v-model="data.autoAddPlayer"
          :options="[
            { value: 1, label: '自动分配' },
            { value: 0, label: '不分配' },
          ]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
